<template>
	<div class="Insurance">
		<img src="">
		<nav class="tit">
			<h2>天佑车辆保险</h2>
			<div class="con">
				<span>大小事故均可报销</span>
				<b>天佑在线承保</b>
			</div>
		</nav>
		<div class="info">
			<h3 class="title"><span>保障内容</span></h3>
			<ul>
				<li v-for='(item,i) in con' :key='i'>
					<span>{{item.title}}</span>
					<b>{{item.val}}</b>
				</li>
			</ul>
		</div>
		<div class="range">
			<h3 class="title"><span>保障范围</span></h3>
			<p>{{range}}</p>
			<div class="term">
				<div class="tit">保障期限（支付成功后日生效）</div>
        <label  v-for='(item,i) in month' :key='i' :class='{check:rangeIndex == i}' @click='rangeSetIndex(i,item)'>
            <input type="radio" name='"1"' value="item.price" hidden>
            {{item.time}}
        </label>
			</div>
		</div>
        <ul class="car">
            <li v-for='(item,i) in car' :key='i'>
              <p>{{item.prompt}}</p>
              <span v-if='item.isShow'>{{item.val}}</span>
              <input v-else type="text" class="formInput" :placeholder="'请输入'+item.prompt" @keypress='keypressEl($event,item)' v-model='item.val' ref="form">
            </li>
        </ul>
        <div class="buy">
            <label class="Terms">
                <input type="radio" hidden ref="checked">
                <span class="check"></span>
                阅读并同意
                <router-link :to='"/service"'>《投保条款》</router-link>
            </label>
            <div class="btm">
                <div class="price">价格：<span>{{price | priceFiler}}</span></div>
                <a @click='submit'>立即购买></a>
            </div>
        </div>
	</div>
</template>

<script>
var con = [
  { title: "累积报销额度", val: "50000元" },
  { title: "每次报销限额", val: "每辆车每次2000元" },
  { title: "报销次数", val: "不限次数" }
];
var car = [
  { prompt: "投保车牌", val: "" },
  { prompt: "发动机号", val: "8888866684" },
  { prompt: "车架号", val: "" }
];
var month = [
  { id: "1", time: "6个月", price: "500.00" },
  { id: "2", time: "12个月", price: "1000.00" },
  { id: "3", time: "24个月", price: "2000.00" },
  { id: "4", time: "36个月", price: "3000.00" }
];
var range =
  "累积报销额度累积报销额度累积报销额度累积报累累，报销额度累积报销额度累积报销额度累积报销额度累积报，额度累积报销额度累积报销额度";
export default {
  name: "HelloWorld",
  data() {
    return {
      con: con,
      range,
      month,
      car,
      rangeIndex: 0,
      price: 0
    };
  },
  filters: {
    priceFiler(str) {
      str = str.toString();
      if (str.indexOf("¥") !== -1) return str;
      else return "¥" + parseFloat(str).toFixed(2);
    }
  },
  beforeMount() {
    //设置价格
    this.price = this.month[0].price;
  },
  mounted() {
    let id = this.$route.params.id;

    //为 this.car 添加是否显示
    this.car.map(function(v, i) {
      v.val === "" ? (v.isShow = false) : (v.isShow = true);
    });
  },
  methods: {
    keypressEl(e, val) {
      var isShow = val.isShow;
      if (isShow) {
        e.preventDefault();
      }
    },
    submit() {
      var form = this.$refs.form;
      var checked = this.$refs.checked;
      var isSubmit = false;

      for (let i = 0; i < this.car.length; i++) {
        var v = this.car[i];
        if (v.val === "") {
          isSubmit = true;
          alert(v.prompt + "不能为空！");
          break;
        }
      }

      if (isSubmit) return false;
      //判断是否勾选投保条款
      if (!checked.checked) {
        isSubmit = true;
        alert("请勾选投保条款！");
      }

      if (!isSubmit) {
        //ajax发送数据
        console.log("ajax发送数据");
        // console.log('当前选中是 ' + month[this.rangeIndex])
        // console.log('车 ：' + this.car)
      }
    },
    rangeSetIndex(i, item) {
      this.rangeIndex = i;
      this.price = item.price;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
* {
  font-weight: normal;
  line-height: 1;
  outline: none;
}
input {
  border: none;
}

.title {font-size: 16px;text-align: center;position: relative;padding: 20px 0 15px;
  &:after,&:before {content: "";display: block;height: 1px;position: absolute;left: 50%;top: 50%;z-index: 1;}
  &:after {width: 120px;background-color: white;transform: translateX(-50%);}
  &:before {width: 200px;background-color: #9b9b9b;transform: translateX(-50%);}
  span {background-color: white;padding: 0 4px;line-height: 1;position: relative;z-index: 2;font-size: 15px;}
}

.Insurance {position: fixed;left:0;top:0;width:100%;height:100%;overflow-y: auto;background-color: #f5f5f5;
  img {height: 158px;display: block;background-color: #f0f0f0;}
  .tit {background-color: white;padding: 20px 10px 16px;
    h2 {font-size: 23px;margin-bottom: 13px;}
    .con {font-size: 12px;color: #9b9b9b;overflow: hidden;
      span {float: left; }
      b { float: right; }
    }
  }
  .info {background-color: white;margin-top: 10px;padding: 0 10px 27px;
    li {overflow: hidden;font-size: 13px;
      span {float: left;}
      b {float: right;}
    }
    li + li {margin-top: 13px;}
  }
  .range {background-color: white;margin-top: 10px;padding: 0 10px 0;
    p {text-indent: 26px;font-size: 13px;line-height: 2;color: #999;padding-bottom: 12px;}
    .term {border-top: 1px solid #ddd;}
    .term {text-align: center;padding: 4px 0 20px;
      label {display: inline-block;width: 20%;text-align: center;border: 1px solid #ccc;border-radius: 100px;line-height: 36px;font-size: 14px;}
      .check {background-color: #ffeded;color: #f02b2b;border-color: #ffeded;}
      label + label {margin-left: 10px;}
    }
  }
  .car {margin: 10px 0 100px;background-color: white;
    li {display: flex;
      p {width: 100px;line-height: 40px;margin-left: 10px;}
      span { line-height: 40px; font-size:16px;}
      input { height: 20px; padding: 10px 0; font-size: 16px;}
    }
  }
  .buy {background-color: white;padding-top: 10px;padding-left: 10px;position: fixed;width: 100%;bottom: 0;left: 0;
    .Terms { font-size: 12px;
      a { color: #f02b2b; }
      .check { display: inline-block; width: 10px; height: 10px; background-color: white; border-radius: 50%; box-shadow: 0px 0px 0 2px white, 0 0 0 3px #8b8b8b;}
      span {vertical-align: middle;margin-top: -3px;margin-right: 10px;}
      input:checked + .check { background-color: #f02b2b; }
    }
    .btm {overflow: hidden;margin-top: 14px;
      * { line-height: 50px; }
      .price {float: left;font-size: 15px;margin-top: -2px;
        span {font-size: 22px;color: #f02b2b;}
      }
      a {float: right;background-color: #f02b2b;color: white;padding: 0 20px;font-size: 17px;}
    }
  }
}
</style>
